<template>
 	<div class="layui-layout layui-layout-admin zlgj-page">
       <Secondnav urlname="zlgjindex"></Secondnav>
       <div class="viewport01">

        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>{{itemData.quantity.memberNumber}}</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            会员数
                        </span>
                    </div>
                    <div class="item">
                        <h4>{{itemData.quantity.shopNumber}}</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            门店数
                        </span>
                    </div>
                    <div class="item">
                        <h4>{{itemData.quantity.dealerNumber}}</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            商家数
                        </span>
                    </div>
                    <div class="item">
                        <h4>{{itemData.quantity.accountNumber}}</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            顾客数
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active" style="border:none;">实时订单数据</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">时间</span>
                            <span class="col">内容</span>
                            <span class="col">金额</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row" v-for='item in orderlist'>
                                    <span class="col">{{dotime(item.createAt)}}</span>
                                    <span class="col">{{item.accountName}}（{{item.mobile}}）下单</span>
                                    <span class="col">{{item.payAmount/100}}</span>
                                    <span class="icon-dot"></span>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>门店人员构成统计</h3>
                    <div class="chart">
                       <div id="tb02" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 地图 -->
            <div class="map">
                <h3>
                    <span class="icon-cube"></span>
                    顾客热力图
                </h3>
                <div class="chart">
                    <div class="geo">
                    	<div id='tb04' style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel">
                <div class="inner">
                    <h3>店铺复工率（%）</h3>
                    <div class="chart">
                        <div class="bar"><div id='tb05' style="width: 100%;height:100%;"></div></div>
                        <div class="data">
                            <div class="item">
                                <h4>{{itemData.returnWork.shopCount}}</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                                                今日开店总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>{{itemData.returnWork.finishCount}}</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    今日新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <!-- 订单 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 筛选 -->
                    <div class="filter">
                        <a href="javascript:;" data-key="day365" :class="xsecur==1?'active':''" @click="getxse(1)">365天</a>
                        <a href="javascript:;" :class="xsecur==2?'active':''"  @click="getxse(2)">90天</a>
                        <a href="javascript:;" :class="xsecur==3?'active':''"  @click="getxse(3)">30天</a>
                        <a href="javascript:;" :class="xsecur==4?'active':''"  @click="getxse(4)">24小时</a>
                    </div>
                    <!-- 数据 -->
                    <div class="data">
                        <div class="item">
                            <h4>{{xse.orderNumber}}</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <h4>{{xse.salesVolume/100}}</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                销售额(元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售额 -->
            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>销售额统计（单位元）</h3>
                        <!-- <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a> -->
                        <a href="javascript:;" class="active" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="line">
                        	<div id='tb01' style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 渠道 季度 -->
            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="item">
                                <h4>{{itemData.channelDistribution.applet}}<small>%</small></h4>
                                <span>
                                    <i class="icon-plane"></i>
                                    线上小程序
                                </span>
                            </div>
                            <div class="item">
                                <h4>{{itemData.channelDistribution.shoppingMall}}<small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    线下商场
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>{{itemData.channelDistribution.couponLink}}<small>%</small></h4>
                                <span>
                                    <i class="icon-train"></i>
                                    优惠券链接
                                </span>
                            </div>
                            <div class="item">
                                <h4>{{itemData.channelDistribution.consultantPromotion}}<small>%</small></h4>
                                <span>
                                    <i class="icon-bus"></i>
                                    顾问推广
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">
                            <div class="box">
                            	<div class="gauge" id='tb06'></div>
                                <div class="label">{{itemData.channelDistribution.totalProportion}}<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>{{itemData.channelDistribution.quarterlySales/1000000}}</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #6acca3"></i>
                                        销售额(万元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>{{itemData.channelDistribution.growth}}%</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #ed3f35"></i>
                                        同比增长
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="top panel">
                <div class="inner" style="display: block;">
                    <div class="all">
                        <h3>新增客户数</h3>
                    </div>
                    <div class="province" style="clear:both;display:block;width:100%;">
                        <div id='tb03' style="width: 100%;height:150px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import Pagetop from './common/pagetop.vue'
	import Secondnav from './common/zlgjsecondnav.vue'
    import 'echarts/extension/bmap/bmap'
	export default {
	  name: 'index',
	  components: {Pagetop,Secondnav},
	  data () {
	    return {
	        itemData:{quantity:'',orderSales:'',returnWork:'',customerArray:'',
          channelDistribution:{applet:0,shoppingMall:0,consultantPromotion:0,couponLink:0,growth:0,quarterlySales:0,totalProportion:0},
          },
          xse:'',
          xsecur:1,
          xstb:'',
          orderlist:[],
	        type:localStorage.getItem("type")
	    }
	  },
	  mounted(){
		this.getdate();
   		this.getxse(1);
    	this.getxstb(4)
    	this.getorder();
	  },
	  methods: {
      getorder:function(){
      	var url='/crmweb/aapi/v1.9/pedestrian-street/home/data';
      	var _this=this;
      	ajaxRequest(url,'GET','json','',function(ret,err){
          if(ret.data.realTimeOrderArrayVM.realTimeOrder){
            _this.orderlist=ret.data.realTimeOrderArrayVM.realTimeOrder;
          }
      	})
      },
      dotime:function(val){
      	return FormatDate(val);
      },
	  	getdate:function(){
	  		var url='/crmweb/aapi/v1.9/pedestrian-street/home/data';
	  		var _this=this;
	  		ajaxRequest(url,'GET','json','',function(ret,err){
	  			_this.itemData=ret.data;
			  	_this.gettb(1);
			  	_this.gettb(2);
			  	_this.getrl();
		      	_this.getfg();
		      	_this.getyb();
	  		})

	  	},
      getxse:function(type){
      	var url='/salesreport/aapi/v1.9/pedestrian-street/orderSales/'+type;
      	var _this=this;

      	ajaxRequest(url,'GET','json','',function(ret,err){
      		_this.xse=ret.data;
          _this.xsecur=type;
      	})

      },
      getxstb:function(type){
        var url='/salesreport/aapi/v1.9/pedestrian-street/salesVolume/'+type;
        var _this=this;
        ajaxRequest(url,'GET','json','',function(ret,err){
        	_this.xstb=ret.data;
          _this.gettb(0);
        })

      },
	  	gettb:function(index){
	  		if(index==2){
		  		var res=this.itemData.customerArray.newCustomers;
		      	var arr1=[]
		      	var arr2=[];
		      	for(var i=0;i<res.length;i++){
		      		var time=res[i].pointTime;
		      		arr1.push(time)
		      		arr2.push(res[i].newCustomersNumber)
		      	}
		   }
       if(index==1){
         var res=this.itemData.storeStaffComposition
         var arr=[{
						value:res.extensionProportion,
						name: "推广"
					}, {
						value: res.clerkProportion,
						name: "店员"
					}, {
						value: res.consultantProportion,
						name: "顾问"
					}, {
						value: res.shopProportion,
						name: "门店"
					}, {
						value: res.quitProportion,
						name: "离职"
					}]

       }
       if(index==0){
          var res=this.xstb.salesVolumeReportList;
          var arr1=[]
          var arr2=[];
          for(var i=0;i<res.length;i++){
          	var time=res[i].monthOrDay+'日';
          	arr1.push(time)
          	arr2.push(res[i].salesVolume/100)
          }
       }
	  		var n = [{
        		backgroundColor:'rgba(255, 255, 255, 0)',
				grid: {
			        left: '3%',
			        right: '3%',
			        bottom: '0%',
			        top:'5%',
			        containLabel: true
			    },
				xAxis:{
					type: "category",
					boundaryGap: !1,
					data:arr1,
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				},
				yAxis: {
					type: "value",
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				},
				series: [{
					name: "销售额",
					type: "line",
					smooth: !0,
					itemStyle: {
						normal: {
							areaStyle: {
								type: "default"
							}
						}
					},
					data:arr2
				}]
			}, {

				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series: [
	              {
	                  name: '访问来源',
	                  type: 'pie',
	                  radius:'50%',
	                  avoidLabelOverlap: false,
	                  label: {
	                      show: false,
	                      position: 'center'
	                  },

	                  emphasis: {
	                      label: {
	                          show: true,
	                          fontSize: '30',
	                          fontWeight: 'bold'
	                      }
	                  },
	                  labelLine: {
	                      show: false
	                  },
	                  itemStyle:{
				        normal:{
				           label:{
				              show: true,
				              formatter: '{b}:{d}%'
				           },
				           labelLine :{show:true},
				           color:function(params) {
	                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000',
                                ];
                                return colorList[params.dataIndex]
	                        }
						}
					  },
	                  data: arr
	              }
	          ]


			}, {
				grid: {
			        left: '0%',
			        right: '3%',
			        bottom: '3%',
			        top:'10%',
			        containLabel: true
			    },
				xAxis: [{
					type: "category",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          },
					data:arr1
				}],
				yAxis: [{
					type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
				}],
				series: [{
					type: "line",
					data:arr2
				}]
			}]
     		 var option=n[index];
      		var i=index+1;
      		var id='tb0'+i;
			let myChart = echarts.init(document.getElementById(id))
			myChart.setOption(option);
	  	},
		timeDate:function(time,s){
	  		return FormatDate(time,s);
	    },
	    getyb:function(){
			var option = {
		        series: [
		            {
		                type: 'pie',
		                radius: ['130%', '150%'],  // æ”¾å¤§å›¾å½¢
		                center: ['50%', '80%'],    // å¾€ä¸‹ç§»åŠ¨  å¥—ä½75%æ–‡å­—
		                label: {
		                    show: false,
		                },
		                startAngle: 180,
		                hoverOffset: 0,  // é¼ æ ‡ç»è¿‡ä¸å˜å¤§
		                data: [
		                    {
		                        value: 100,
		                        itemStyle: { // é¢œè‰²æ¸å˜#00c9e0->#005fc1
		                            color: {
		                                type: 'linear',
		                                x: 0,
		                                y: 0,
		                                x2: 0,
		                                y2: 1,
		                                colorStops: [
		                                    { offset: 0, color: '#00c9e0' },
		                                    { offset: 1, color: '#005fc1' }
		                                ]
		                            }
		                        }
		                    },
		                    { value: 100, itemStyle: { color: '#12274d' } }, // é¢œè‰²#12274d

		                    { value: 200, itemStyle: { color: 'transparent' } }// é€æ˜Žéšè—ç¬¬ä¸‰å—åŒºåŸŸ
		                ]
		            }
		        ]
		    };
			let myChart = echarts.init(document.getElementById('tb06'))
			myChart.setOption(option, true);
	    },
	  	screens:function(){
			return screen();
		},
      getrl:function(){
        $.get(mapurl+'/static/other/js/hangzhou-tracks.json', function (data) {
        var points = [].concat.apply([], data.map(function (track) {
            return track.map(function (seg) {
                return seg.coord.concat([1]);
            });
        }));
        let myChart = echarts.init(document.getElementById('tb04'))
        var option='';
        myChart.setOption(option = {
            animation: false,
            bmap: {
                center: [120.13066322374, 30.240018034923],
                zoom: 14,
                roam: true
            },
            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: points,
                pointSize: 5,
                blurSize: 6
            }]
        });
        // 添加百度地图插件
        var bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
		bmap.setMapStyleV2({
		  styleId: '236bf9896f40739fa728522fe36fec3b'
		});
        });

      },
      getfg:function(){
      	var res=this.itemData.returnWork.returnWorkRate;
      	var arr1=[]
      	var arr2=[];
      	for(var i=0;i<res.length;i++){
      		var time=res[i].month+"-"+res[i].day;
      		arr1.push(time)
      		arr2.push(res[i].rate)
      	}
        var option = {
            barWidth :10,
            grid: {
		        left: 0,
		        right: '5%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: "#b0c5e4",
                    }
                },
                data: arr1
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#b0c5e4",
                    }
                },

                type: 'value'
            },
            series: [{
                data:arr2,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0)'
                }
            }]
        };
        let myChart = echarts.init(document.getElementById('tb05'))
        myChart.setOption(option);
      }
	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});

 	  },
	}
</script>
<style>

	@import '../../static/other/css/zlgj/index.css'

</style>
